<template>
	<app-dialog ref="dialog" width="70%" @confirm="save" bg="" :isFooter="false" :isClose="false">
		<view class="content">

			<view class="bg">
				<view class="title">兑换码</view>
				<view class="input">
					<u-input placeholder="请输入兑换码" disabledColor="#ffffff" border="none" v-model="text">
						<template slot="suffix">
							<u-button  @tap="sys" type="success" size="mini" plain="true" shape="circle" text="扫一扫" ></u-button>
						</template>
					</u-input>
				</view>
				<view class="btn" @click="save">点击兑换</view>
			</view>
			<image class="close" @click="$refs.dialog.close()" :src="$imgUrl('/dialog_close.png')" mode="scaleToFill" />
		</view>
	</app-dialog>
</template>

<script>
	export default {
		components: {},

		data() {
			return {
				text: ''
			};
		},

		methods: {
			sys(){
				var that = this
				uni.scanCode({
					success: function(res) {
						if (res.scanType === 'QR_CODE') {
							that.$http.post('/app/dhm/sydhm', {
								id: res.result
							}).then(ress => {
								uni.showToast({
									title: '使用成功',
									icon: 'none'
								});
								this.$emit('gethy');
								this.$refs.dialog.close();
							})
						}
					},
				})
			},
			async open() {
				this.reset();

				// 打开弹框
				await this.$refs.dialog.open();
			},

			reset() {},

			/**
			 * 保存
			 */
			async save() {
				try {
					///	this.$refs.dialog.close();
					//	this.hideLoading();
					this.$http.post('/app/dhm/sydhm', {
						id: this.text
					}).then(ress => {
						uni.showToast({
							title: '使用成功',
							icon: 'none'
						});
						this.$emit('gethy');
					})
				} catch (e) {
					this.errorLoading(e);
				}
				this.$refs.dialog.close();
			}
		}
	};
</script>

<style lang="scss" scoped>
	

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.close {
		position: absolute;
		right: 3rpx;
		top: 30rpx;
		height: 40rpx;
		width: 40rpx;
	}

	.bg {
		// background-image: url('../../static/image/my_code.png');
		background: url($imgUrl + "/my_code.png") no-repeat;
		background-size: 100% 100%;
		width: 540rpx;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		@include center();
		margin-top: 140rpx;
		color: #000;
		font-weight: bold;
		font-size: 40rpx;
		margin-left: 30rpx;
	}

	.input {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		width: 320rpx;
		padding: 14rpx 10rpx;
		margin-left: 40rpx;
		@include center();
	}

	.btn {
		margin-top: 60rpx;
		margin-left: 40rpx;
		@include btn($width: 340rpx);
	}

	.btns {
		margin-top: 5rpx;
		margin-left: 40rpx;
		@include btn($width: 340rpx);
	}
</style>